<script setup>
import Header from './components/Header.vue';
import Navigator from './components/Navigator.vue';
import Content from './components/Content.vue';
import { ref } from 'vue';
let menu = ref("")
function recriver(date) {
  menu.value = date;
  }
</script>

<template>
  <div>
    {{ menu }}
    <Header class="header"></Header>
    <Navigator  @send-menu="recriver" class="navigator"></Navigator>
    <Content class="content" :message = "menu"></Content>
  </div>
</template>

<style scoped>
  .header {
    height: 80px;
    border: 1px solid #00a2ff;
    background-color: #b1e2ff;
  }
  .navigator {
    height: 900px;
    width: 20%;
    border: solid 1px #00ff6a;
    float: left;
    background-color: #abfacc;
  }
  .content {
    height: 900px;
    width: 79%;
    border: solid 1px #ff6a00;
    float: right;
    background-color: #ffd8bb;
  }
</style>
